<template>
  <div class="list-info-panel">
    <select-tab class="tabs" :tabarr="tabs" @selectData="selectData"></select-tab>
    <div class="scenery" v-show="this.selectTab !== '酒店列表'">
      <div class="search-area">
        <div class="form-area">
          <div class="form-item">
            <label>景区名：</label>
            <el-input
              class="ipt"
              v-model="queryInfo.name"
              placeholder="请输入"
              @keyup.enter.native="getSceneryList"
            />
          </div>
          <div class="form-item">
            <label>景区地址：</label>
            <el-input class="ipt" v-model="queryInfo.position" placeholder="请输入"></el-input>
          </div>
          <div class="form-item">
            <label>景区等级：</label>
            <el-select clearable class="ipt" v-model="queryInfo.rank" placeholder="请输入">
              <el-option
                v-for="item in rank"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <el-button size="mini" type="primary" class="button" @click="getSceneryList">查询</el-button>
      </div>
      <page-table
        v-loading="tableLoading"
        :data="tableData"
        :total="total"
        :page="queryInfo.pagenum"
        :pageSize="queryInfo.pagesize"
        @currentChange="pageChange"
        :editHeight="410"
      >
        <el-table-column prop="name" align="center" label="景区名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="position" align="center" label="景区地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rank" align="center" label="景区等级" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-rate disabled v-model="scope.row.rank"></el-rate>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="price" align="center" label="景区价格"
        ><template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.price === 0">免费</el-tag>
          <el-tag type="info" v-else>{{ scope.row.price }}/人</el-tag>
        </template></el-table-column
        >-->
        <el-table-column fixed="right" label="定位" align="center" width="60">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </page-table>
    </div>
    <div class="hotel" v-show="this.selectTab === '酒店列表'">
      <page-table
        v-loading="tableLoading"
        :data="tableData_hotel"
        :total="total_hotel"
        :page="queryInfo_hotel.pagenum"
        :pageSize="queryInfo_hotel.pagesize"
        @currentChange="pageChange_hotel"
        :editHeight="410"
      >
        <el-table-column prop="name" align="center" label="酒店名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="position" align="center" label="酒店地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rank" align="center" label="酒店等级" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-rate disabled v-model="scope.row.rank"></el-rate>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="price" align="center" label="景区价格"
        ><template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.price === 0">免费</el-tag>
          <el-tag type="info" v-else>{{ scope.row.price }}/人</el-tag>
        </template></el-table-column
        >-->
        <el-table-column fixed="right" label="定位" align="center" width="60">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </page-table>
    </div>
  </div>
</template>

<script>
import SelectTab from '@/components/SelectTab/select-tab'
export default {
  data() {
    return {
      rank: [
        { value: 0, label: '无等级' },
        { value: 1, label: 'A级' },
        { value: 2, label: 'AA级' },
        { value: 3, label: 'AAA级' },
        { value: 4, label: 'AAAA级' },
        { value: 5, label: 'AAAAA级' }
      ],
      queryInfo: {
        name: '',
        rank: '',
        position: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 8
      },
      queryInfo_hotel: {
        name: '',
        rank: '',
        position: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 8
      },
      tabs: [{ text: '景区列表' }, { text: '酒店列表' }],
      tableLoading: false,
      tableData: [],
      total: 0,
      tableData_hotel: [],
      total_hotel: 0,
      selectTab: ''
    }
  },
  mounted() {
    this.getSceneryList()
  },
  methods: {
    selectData(selectData) {
      this.selectTab = selectData.text
      console.log(this.selectTab)
    },
    detail(row) {
      if (row.src && !(row.src instanceof Array)) {
        row.src = row.src.split(',')
      }
      // console.log(row)
      this.$emit('detail', row)
      // this.$nextTick(() => {

      // })
    },
    pageChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getSceneryList()
    },
    pageChange_hotel(newPage) {
      this.queryInfo_hotel.pagenum = newPage
      this.getHotelList()
    },
    async getSceneryList() {
      // this.$http.defaults.headers['IP'] = location.href.toString()
      // this.$http.defaults.headers['token'] = window.sessionStorage.getItem(
      //   'token'
      // )
      const { data: res } = await this.$http.get('/scenerys', {
        params: this.queryInfo
      })
      if (res.status !== 201) {
        return this.$message.error('获取景区列表失败！')
      }
      // console.log(res.scenery)
      this.tableData = res.scenery
      this.total = res.total
    },
    async getHotelList() {
      // this.$http.defaults.headers['IP'] = location.href.toString()
      // this.$http.defaults.headers['token'] = window.sessionStorage.getItem(
      //   'token'
      // )
      const { data: res } = await this.$http.get('/hotels', {
        params: this.queryInfo_hotel
      })
      if (res.status !== 201) {
        return this.$message.error('获取酒店列表失败！')
      }
      // console.log(res.scenery)
      this.tableData_hotel = res.hotel
      this.total_hotel = res.total
    }
  },
  components: {
    SelectTab,
    'page-table': () => import('@/components/PageTable/pageTable.vue')
  },
  watch: {
    selectTab(val) {
      if (val === '酒店列表') this.getHotelList()
    }
  }
}
</script>

<style lang="scss" scoped>
.list-info-panel {
  width: 600px;
  height: 636px;
  // height: 680px
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 4px 0 #696969;
  .tabs {
    // background-image: linear-gradient(to right, #4084f7, #4b79fe);
    background-image: url(./top_bg.png);
  }
  .search-area {
    padding: 10px 0px 0 0;
    display: flex;
    .form-area {
      display: flex;
      flex-wrap: wrap;
      .form-item {
        display: flex;
        align-items: center;
        width: 260px;
        margin-bottom: 8px;
        label {
          color: #2a2c2f;
          white-space: nowrap;
          text-align: right;
          flex: 1;
        }
        .ipt {
          width: 170px;
        }
      }
    }
    .button {
      align-self: flex-end;
      margin-bottom: 10px;
    }
  }
}
</style>
